<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/flood.css">
    <title>Document</title>
</head>

<body>
    <div class="bdz-title">无锡市城市隧道群泵站防汛</div>
    <div class="clock"></div>
    <input class="search-tunnel-name" placeholder="建筑群">
    <div class="search-tunnel-name-btn">></div>
   
    <input class="search-area-name" placeholder="区域简称">
    <div class="search-area-name-btn">></div>

    <div class="bdz-table-head">
        <div class="bdz-table-head-child">序号</div>
        <div class="bdz-table-head-child">建筑群</div>
        <div class="bdz-table-head-child">区域简称</div>
        <div class="bdz-table-head-child">当前<br>传感器</div>
        <div class="bdz-table-head-child">液位值<br>(mm)</div>
        <div class="bdz-table-head-child">1#泵<br>状态</div>
        <div class="bdz-table-head-child">1#泵<br>控制状态</div>
        <div class="bdz-table-head-child">2#泵<br>状态</div>
        <div class="bdz-table-head-child">2#泵<br>控制状态</div>
        <div class="bdz-table-head-child">3#泵<br>状态</div>
        <div class="bdz-table-head-child">3#泵<br>控制状态</div>
        <div class="bdz-table-head-child">4#泵<br>状态</div>
        <div class="bdz-table-head-child">4#泵<br>控制状态</div>
        <div class="bdz-table-head-child">5#泵<br>状态</div>
        <div class="bdz-table-head-child">5#泵<br>控制状态</div>
        <div class="bdz-table-head-child">6#泵<br>状态</div>
        <div class="bdz-table-head-child">6#泵<br>控制状态</div>
        <div class="bdz-table-head-child">低水位<br>报警值</div>
        <div class="bdz-table-head-child">停泵<br>水位值</div>
        <div class="bdz-table-head-child">第一<br>启泵值</div>
        <div class="bdz-table-head-child">第二<br>启泵值</div>
        <div class="bdz-table-head-child">高水位<br>报警值</div>

    </div>
    <div id="bdz-chart-container" class="bdz-chart-container">
        <div class="bdz-table-raw"></div>
    </div>



    <script src="../js/jquery-3.6.0.min.js"></script>
    <!-- <script src="../js/widget-pump.js"></script> -->
    <script src="../js/flood.js"></script>
    <script src="../js/flood-data.js"></script>

    <script>
        var components = {};
        var currentTunnel = '';
        var currentArea = '';

        // 封装获取数据的函数
        function fetchData(params) {
            $('#bdz-chart-container').empty();
            components = {};
            
            $.get(`https://tunnel.memanager.cn/pump-houses/running-values?${params}`, function(res) {
                if (res.data.length === 0) {
                    $('<div class="no-results">未搜索到内容！</div>').appendTo('#bdz-chart-container');
                    return;
                }
                
                res.data.forEach(item => {
                    var option = $.extend({}, item);
                    components[item.id] = $('#bdz-chart-container').pumpTable(option);
                    components[item.id].update(option)
                });
            });
        }

        // 隧道搜索按钮点击事件
        $('.search-tunnel-name-btn').click(function() {
            currentTunnel = $('.search-tunnel-name').val();
            const tunnelParam = currentTunnel ? `tunnel=${encodeURIComponent(currentTunnel)}` : '';
            fetchData(tunnelParam);
        });

        // 区域搜索按钮点击事件
        $('.search-area-name-btn').click(function() {
            currentArea = $('.search-area-name').val();
            const areaParam = currentArea ? `area=${encodeURIComponent(currentArea)}` : '';
            fetchData(areaParam);
        });

        // 初始化加载数据
        fetchData('');
    </script>



</body>

</html>